<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog"
             :title="isAdd ? '新增' : '编辑'"
             append-to-body width="40%">
    <user-select ref="userSel" @setUserInfo="setUserInfo"/>
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
      <el-form-item label="年度" prop="planYear">
        <el-date-picker
          v-model="form.planYear"
          type="year"
          value-format="yyyy"
          placeholder="选择年度">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划月份" prop="planMonth">
        <el-date-picker
          v-model="form.planMonth"
          type="month"
          format="M月"
          value-format="M"
          placeholder="选择计划月份">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="培训计划名称" prop="planName">
        <el-input v-model="form.planName" maxlength="20"/>
      </el-form-item>
      <el-form-item label="培训内容">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入培训内容"
          v-model="form.planContent">
        </el-input>
      </el-form-item>
      <el-form-item label="计划培训人数" prop="number">
        <el-input-number v-model.number="form.number" :min="0" :max="5000" controls-position="right"
                         placeholder="计划培训人数"/>
      </el-form-item>
      <el-form-item label="参与方式" prop="planType">
        <el-radio-group v-model="form.planType">
          <el-radio :label="1">所有人</el-radio>
          <el-radio :label="2">指定部门</el-radio>
          <el-radio :label="3">指定人员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="参与部门" v-show="form.planType===2">
        <el-tree
          ref="tree"
          :data="depts"
          show-checkbox
          node-key="id"
          :default-checked-keys="deptSelect"
          :props="defaultProps">
        </el-tree>
      </el-form-item>
      <el-form-item label="学习人员" v-show="form.planType===3">
        <el-input disabled v-model="userInfo" @click.native="selectUser"/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 10}"
          placeholder="请输入备注信息"
          v-model="form.remark">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { add } from '@/api/business/trainPlan'
  import userSelect from '../components/userSelect'
  import { getDepts } from '@/api/framework/system/dept'

  export default {
    components: { Treeselect, userSelect },
    props: {
      isAdd: {
        type: Boolean,
        required: true
      }
    },
    name: 'from',
    data() {
      return {
        loading: false,
        dialog: false,
        userInfo: null,
        deptSelect: [],
        depts: [],
        form: {
          planYear: null,
          planMonth: null,
          planName: null,
          planContent: null,
          planType: null,
          number: null,
          remark: null,
          userList: []
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        rules: {
          planYear: [
            { required: true, message: '请选择年度', trigger: 'change' }
          ],
          planMonth: [
            { required: true, message: '请选择月份', trigger: 'change' }
          ],
          planName: [
            { required: true, message: '请输培训计划名称', trigger: 'blur' }
          ],
          planType: [
            { required: true, message: '请选择参与方式', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      cancel() {
        this.dialog = false
        this.userInfo = null
        this.deptSelect = []
        this.form = {
          planYear: null,
          planMonth: null,
          planName: null,
          planContent: null,
          planType: null,
          number: null,
          remark: null,
          userList: []
        }
      },
      doSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.themeImage = JSON.stringify(this.form.themeImage)
            this.form.courseFile = JSON.stringify(this.form.courseFile)
            this.doAdd()
          }
        })
      },
      doAdd() {
        if (this.form.planType === 2) {
          let checkedNodes = this.$refs.tree.getCheckedNodes()
          this.form.userList = checkedNodes.map((item) => {
            const dept = { deptUserId: item.id, deptUserName: item.name }
            return dept
          })
        }
        add(this.form).then(res => {
          this.$notify({
            title: '操作成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.$parent.init()
          this.cancel()
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
      },
      selectUser() {
        this.$refs.userSel.dialog = true
        this.$refs.userSel.init()
      },
      setUserInfo(data) {
        this.form.userList = data
        data.forEach(item => this.form.userList.push(item))
        this.form.userList = Array.from(new Set(this.form.userList))
        this.userInfo = this.form.userList.map((item) => item.deptUserName).join(',')
      },
      initData() {
        const sort = 'id,desc'
        const params = { sort: sort }
        getDepts(params).then(res => {
          this.depts = res.content
        })
      }
    }
  }
</script>

<style scoped>

</style>
